<#import path="/Sport.class,/Thumbnail.class" root="{{LAM.classPath}}" />
<#import path="/artTemplate/artTemplate" root="{{LAM.PLUGINS}}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <script type="text/javascript">
        LAMJS.run(function() {
            'use strict';
            var System=this;
            System.use();
            System.Loader
                    .load({
                        'baseUrl':System._ROOT_,
                        'css':[
                             '/common/plugins/bootstrap/bootstrap'
                            ,'/common/css/lib/global'
                        ]
                    }).print();



        });
    </script>
    <style type="text/css">
        .w-page{}
        html,body,#container,.sidbar,.content{height:100%;}
        #container{}
        .sidbar{width:200px;position: fixed;top:0;bottom:0; left:0;background:red;}
        #content{
            position: absolute;
            top: 0px;
            right: 0px;
            left: 200px;
            background:green;
        }
        ul li{min-height:250px;overflow: hidden;}

    </style>

</head>

<body>
<!--嵌套三层 每一层是一个对象-->
<div id="container" class="">
    <div class="sidbar">
        <#include tp-data="{'content':'this is include'}" file="{{LAM.VIEWS}}/include/test.html" dataType="html" />
    </div>

    <div class="content over-h" id="content">
        <ul id="ul1" class="sectionFloat clearfix P10">

        </ul>


    </div>

    </div>
</div>

</body>
</html>
<script type="text/html" id="list_tml">
    <% for(var i=0;i<10;i++){%>
    <li><div class="H100 M10 P10" style="background: #fff;"><%=content%></div></li>
    <% }%>
</script>



<script type="text/javascript">
    LAMJS.run(function(){
        'use strict';
        var System=this;

        var ul1;
        function layout(){
            ul1=new System.Thumbnail({'$view':$('#ul1'),'baseWidth':200,'baseHeight':150,'$li':$('#ul1 > li')}).run();
        }
        $(function(){
            var renderPartial = template.compile($('#list_tml').html());
            var html = renderPartial({
                'content':'This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.'
            });
            $('#ul1').html(html);


            layout();

        });

        $(window).resize(function(){
            ul1.resize();


        });



    });


</script>